<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 属性: 标准属性  和  自定义属性 -->
        <!-- 标签本身具备的属性:  class  id  href  src -->
        <!-- 获取 ->  元素.属性  或  设置 ->  元素.属性 = 值     -->
                            <!-- abc   123 -->

    <!-- 自定义属性 -->
        <!-- el.getAttribute(key) 获取属性 -->
        <!-- el.setAttribute("key","val") 设置属性 -->
        <!-- el.removeAttribute("key") 删除属性 -->
        <!-- 以上可以对 标准 和 自定义 进行设置 获取 和 删除 -->

    <div class="box_class" id="box_id" title="box_title" abc="123">嘿嘿</div>
    <script>
        var box = document.querySelector("div");
            // 标准属性的设置和获取
                // box.className = "class_box"
                // box.id = "id_box"
                // box.title = "title_box"
                // box.qwe = "456"
                // console.log(box)
                // console.log( box.className )
                // console.log( box.id )
                // console.log( box.title )
                // console.log( box.abc )

            // 自定义属性
                // console.log( box.getAttribute("id") )
                // console.log( box.getAttribute("abc") )

                // box.setAttribute("class","classBox")
                // box.setAttribute("qwe","456")

                // box.removeAttribute("title")
                // box.removeAttribute("abc")

            // 修改元素的内容
            // 会解析标签名称
            box.innerHTML = `<b>hello</b><p>innerHTML设置</p>`
            // 不会解析标签 全部当作文本字符初始
            box.textContent = `<a href="#">百度一下</a>`
    </script>
</body>
</html>